<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link type="text/css" rel="stylesheet" href="css/fyz.in.out.style-1.0.0.css"></link>		
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px; font-size:30px; font-family:'微软雅黑'; color:#fff; text-align:center;}
dl.box{display:inline-block; width:350px; overflow:hidden; border:1px solid orange;  margin:20px auto 0px; padding-bottom:20px;}
dl.box dt.box{width:270px; height:180px; line-height:180px; text-align:center; background:orange; margin:30px auto 10px; opacity:0.1;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
}
dl.boxOut dt.box{opacity:1;}
dl.box dd.box{margin:0px auto; text-align:center; line-height:35px;  color:#fff;  cursor:pointer;}
dl.box dd.box span{margin-right:10px; background:orange; display:inline-block; font-size:20px; width:100px; height:30px;}
p{background:orange; margin:20px 0px;}
</style>
</head>
<body style='padding-bottom:300px;'>
<p>animated</p>
<dl class='box box1'>
	<dt class='box'>pulse</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box2'>
	<dt class='box'>bounce</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box3'>
	<dt class='box'>tada</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box4'>
	<dt class='box'>swing</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box5'>
	<dt class='box'>wobble</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box30'>
	<dt class='box'>rollIn</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<p>animated  flip</p>
<dl class='box box6'>
	<dt class='box'>flip</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box7'>
	<dt class='box'>flipInX</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>  
<dl class='box box9'>
	<dt class='box'>flipInY</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<p>animated  fadeIn</p>
<dl class='box box11'>
	<dt class='box'>fadeIn</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box12'>
	<dt class='box'>fadeInUp</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box13'>
	<dt class='box'>fadeInDown</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box14'>
	<dt class='box'>fadeInLeft</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box15'>
	<dt class='box'>fadeInRight</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box16'>
	<dt class='box'>fadeInUpBig</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box17'>
	<dt class='box'>fadeInDownBig</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box18'>
	<dt class='box'>fadeInLeftBig</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box19'>
	<dt class='box'>fadeInRightBig</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<p>animated  bounce</p>
<dl class='box box20'>
	<dt class='box'>bounceIn</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box21'>
	<dt class='box'>bounceInUp</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box22'>
	<dt class='box'>bounceInDown</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box23'>
	<dt class='box'>bounceInLeft</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box24'>
	<dt class='box'>bounceInRight</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<p>animated  rotateIn</p>
<dl class='box box25'>
	<dt class='box'>rotateIn</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box28'>
	<dt class='box'>rotateInUpRight</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box27'>
	<dt class='box'>rotateInDownLeft</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box26'>
	<dt class='box'>rotateInUpLeft</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
<dl class='box box29'>
	<dt class='box'>rotateInDownRight</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
</body>
<script type="text/javascript">
/* box1 start */
$('dl.box1').find('dt.box').hover(function(){$(this).addClass('animated pulse');});
$('dl.box1').find('span.add').click(function(){$('dl.box1').find('dt.box').addClass('animated pulse');});
$('dl.box1').find('span.move').click(function(){$('dl.box1').find('dt.box').removeClass('animated pulse');});
/* box1 end */
/* box2 start */
$('dl.box2').find('dt.box').hover(function(){$(this).addClass('animated bounce');});
$('dl.box2').find('span.add').click(function(){$('dl.box2').find('dt.box').addClass('animated bounce');});
$('dl.box2').find('span.move').click(function(){$('dl.box2').find('dt.box').removeClass('animated bounce');});
/* box2 end */
/* box3 start */
$('dl.box3').find('dt.box').hover(function(){$(this).addClass('animated tada');});
$('dl.box3').find('span.add').click(function(){$('dl.box3').find('dt.box').addClass('animated tada');});
$('dl.box3').find('span.move').click(function(){$('dl.box3').find('dt.box').removeClass('animated tada');});
/* box3 end */
/* box4 start */
$('dl.box4').find('dt.box').hover(function(){$(this).addClass('animated swing');});
$('dl.box4').find('span.add').click(function(){$('dl.box4').find('dt.box').addClass('animated swing');});
$('dl.box4').find('span.move').click(function(){$('dl.box4').find('dt.box').removeClass('animated swing');});
/* box4 end */
/* box5 start */
$('dl.box5').find('dt.box').hover(function(){$(this).addClass('animated wobble');});
$('dl.box5').find('span.add').click(function(){$('dl.box5').find('dt.box').addClass('animated wobble');});
$('dl.box5').find('span.move').click(function(){$('dl.box5').find('dt.box').removeClass('animated wobble');});
/* box5 end */
/* box6 start */
$('dl.box6').find('dt.box').hover(function(){$(this).addClass('animated wobble');});
$('dl.box6').find('span.add').click(function(){$('dl.box6').find('dt.box').addClass('animated wobble');});
$('dl.box6').find('span.move').click(function(){$('dl.box6').find('dt.box').removeClass('animated wobble');});
/* box6 end */
/* box7 start */
$('dl.box7').find('dt.box').hover(function(){$(this).addClass('animated flipInX');});
$('dl.box7').find('span.add').click(function(){$('dl.box7').find('dt.box').addClass('animated flipInX');});
$('dl.box7').find('span.move').click(function(){$('dl.box7').find('dt.box').removeClass('animated flipInX');});
/* box7 end */
/* box8 start */
$('dl.box8').find('dt.box').hover(function(){$(this).addClass('animated flipOutX');});
$('dl.box8').find('span.add').click(function(){$('dl.box8').find('dt.box').addClass('animated flipOutX');});
$('dl.box8').find('span.move').click(function(){$('dl.box8').find('dt.box').removeClass('animated flipOutX');});
/* box8 end */
/* box9 start */
$('dl.box9').find('dt.box').hover(function(){$(this).addClass('animated flipInY');});
$('dl.box9').find('span.add').click(function(){$('dl.box9').find('dt.box').addClass('animated flipInY');});
$('dl.box9').find('span.move').click(function(){$('dl.box9').find('dt.box').removeClass('animated flipInY');});
/* box9 end */
/* box10 start */
$('dl.box10').find('dt.box').hover(function(){$(this).addClass('animated flipOutY');});
$('dl.box10').find('span.add').click(function(){$('dl.box10').find('dt.box').addClass('animated flipOutY');});
$('dl.box10').find('span.move').click(function(){$('dl.box10').find('dt.box').removeClass('animated flipOutY');});
/* box10 end */
/* box11 start */
$('dl.box11').find('dt.box').hover(function(){$(this).addClass('animated fadeIn');});
$('dl.box11').find('span.add').click(function(){$('dl.box11').find('dt.box').addClass('animated fadeIn');});
$('dl.box11').find('span.move').click(function(){$('dl.box11').find('dt.box').removeClass('animated fadeIn');});
/* box11 end */
/* box12 start */
$('dl.box12').find('dt.box').hover(function(){$(this).addClass('animated fadeInUp');});
$('dl.box12').find('span.add').click(function(){$('dl.box12').find('dt.box').addClass('animated fadeInUp');});
$('dl.box12').find('span.move').click(function(){$('dl.box12').find('dt.box').removeClass('animated fadeInUp');});
/* box12 end */
/* box13 start */
$('dl.box13').find('dt.box').hover(function(){$(this).addClass('animated fadeInDown');});
$('dl.box13').find('span.add').click(function(){$('dl.box13').find('dt.box').addClass('animated fadeInDown');});
$('dl.box13').find('span.move').click(function(){$('dl.box13').find('dt.box').removeClass('animated fadeInDown');});
/* box13 end */
/* box14 start */
$('dl.box14').find('dt.box').hover(function(){$(this).addClass('animated fadeInLeft');});
$('dl.box14').find('span.add').click(function(){$('dl.box14').find('dt.box').addClass('animated fadeInLeft');});
$('dl.box14').find('span.move').click(function(){$('dl.box14').find('dt.box').removeClass('animated fadeInLeft');});
/* box14 end */
/* box15 start */
$('dl.box15').find('dt.box').hover(function(){$(this).addClass('animated fadeInRight');});
$('dl.box15').find('span.add').click(function(){$('dl.box15').find('dt.box').addClass('animated fadeInRight');});
$('dl.box15').find('span.move').click(function(){$('dl.box15').find('dt.box').removeClass('animated fadeInRight');});
/* box15 end */
/* box16 start */
$('dl.box16').find('dt.box').hover(function(){$(this).addClass('animated fadeInUpBig');});
$('dl.box16').find('span.add').click(function(){$('dl.box16').find('dt.box').addClass('animated fadeInUpBig');});
$('dl.box16').find('span.move').click(function(){$('dl.box16').find('dt.box').removeClass('animated fadeInUpBig');});
/* box16 end */
/* box17 start */
$('dl.box17').find('dt.box').hover(function(){$(this).addClass('animated fadeInDownBig');});
$('dl.box17').find('span.add').click(function(){$('dl.box17').find('dt.box').addClass('animated fadeInDownBig');});
$('dl.box17').find('span.move').click(function(){$('dl.box17').find('dt.box').removeClass('animated fadeInDownBig');});
/* box17 end */
/* box18 start */
$('dl.box18').find('dt.box').hover(function(){$(this).addClass('animated fadeInLeftBig');});
$('dl.box18').find('span.add').click(function(){$('dl.box18').find('dt.box').addClass('animated fadeInLeftBig');});
$('dl.box18').find('span.move').click(function(){$('dl.box18').find('dt.box').removeClass('animated fadeInLeftBig');});
/* box18 end */
/* box19 start */
$('dl.box19').find('dt.box').hover(function(){$(this).addClass('animated fadeInRightBig');});
$('dl.box19').find('span.add').click(function(){$('dl.box19').find('dt.box').addClass('animated fadeInRightBig');});
$('dl.box19').find('span.move').click(function(){$('dl.box19').find('dt.box').removeClass('animated fadeInRightBig');});
/* box19 end */
/* box20 start */
$('dl.box20').find('dt.box').hover(function(){$(this).addClass('animated bounceIn');});
$('dl.box20').find('span.add').click(function(){$('dl.box20').find('dt.box').addClass('animated bounceIn');});
$('dl.box20').find('span.move').click(function(){$('dl.box20').find('dt.box').removeClass('animated bounceIn');});
/* box20 end */
/* box21 start */
$('dl.box21').find('dt.box').hover(function(){$(this).addClass('animated bounceInUp');});
$('dl.box21').find('span.add').click(function(){$('dl.box21').find('dt.box').addClass('animated bounceInUp');});
$('dl.box21').find('span.move').click(function(){$('dl.box21').find('dt.box').removeClass('animated bounceInUp');});
/* box21 end */
/* box22 start */
$('dl.box22').find('dt.box').hover(function(){$(this).addClass('animated bounceInDown');});
$('dl.box22').find('span.add').click(function(){$('dl.box22').find('dt.box').addClass('animated bounceInDown');});
$('dl.box22').find('span.move').click(function(){$('dl.box22').find('dt.box').removeClass('animated bounceInDown');});
/* box22 end */
/* box23 start */
$('dl.box23').find('dt.box').hover(function(){$(this).addClass('animated bounceInLeft');});
$('dl.box23').find('span.add').click(function(){$('dl.box23').find('dt.box').addClass('animated bounceInLeft');});
$('dl.box23').find('span.move').click(function(){$('dl.box23').find('dt.box').removeClass('animated bounceInLeft');});
/* box23 end */
/* box24 start */
$('dl.box24').find('dt.box').hover(function(){$(this).addClass('animated bounceInRight');});
$('dl.box24').find('span.add').click(function(){$('dl.box24').find('dt.box').addClass('animated bounceInRight');});
$('dl.box24').find('span.move').click(function(){$('dl.box24').find('dt.box').removeClass('animated bounceInRight');});
/* box24 end */
/* box25 start */
$('dl.box25').find('dt.box').hover(function(){$(this).addClass('animated rotateIn');});
$('dl.box25').find('span.add').click(function(){$('dl.box25').find('dt.box').addClass('animated rotateIn');});
$('dl.box25').find('span.move').click(function(){$('dl.box25').find('dt.box').removeClass('animated rotateIn');});
/* box25 end */
/* box26 start */
$('dl.box26').find('dt.box').hover(function(){$(this).addClass('animated rotateInUpLeft');});
$('dl.box26').find('span.add').click(function(){$('dl.box26').find('dt.box').addClass('animated rotateInUpLeft');});
$('dl.box26').find('span.move').click(function(){$('dl.box26').find('dt.box').removeClass('animated rotateInUpLeft');});
/* box26 end */
/* box27 start */
$('dl.box27').find('dt.box').hover(function(){$(this).addClass('animated rotateInDownLeft');});
$('dl.box27').find('span.add').click(function(){$('dl.box27').find('dt.box').addClass('animated rotateInDownLeft');});
$('dl.box27').find('span.move').click(function(){$('dl.box27').find('dt.box').removeClass('animated rotateInDownLeft');});
/* box27 end */
/* box28 start */
$('dl.box28').find('dt.box').hover(function(){$(this).addClass('animated rotateInUpRight');});
$('dl.box28').find('span.add').click(function(){$('dl.box28').find('dt.box').addClass('animated rotateInUpRight');});
$('dl.box28').find('span.move').click(function(){$('dl.box28').find('dt.box').removeClass('animated rotateInUpRight');});
/* box28 end */
/* box29 start */
$('dl.box29').find('dt.box').hover(function(){$(this).addClass('animated rotateInDownRight');});
$('dl.box29').find('span.add').click(function(){$('dl.box29').find('dt.box').addClass('animated rotateInDownRight');});
$('dl.box29').find('span.move').click(function(){$('dl.box29').find('dt.box').removeClass('animated rotateInDownRight');});
/* box29 end */
/* box30 start */
$('dl.box30').find('dt.box').hover(function(){$(this).addClass('animated rollIn');});
$('dl.box30').find('span.add').click(function(){$('dl.box30').find('dt.box').addClass('animated rollIn');});
$('dl.box30').find('span.move').click(function(){$('dl.box30').find('dt.box').removeClass('animated rollIn');});
/* box30 end */
/* box31 start */
$('dl.box31').find('dt.box').hover(function(){$(this).addClass('animated flipOutX');});
$('dl.box31').find('span.add').click(function(){$('dl.box31').find('dt.box').addClass('animated flipOutX');});
$('dl.box31').find('span.move').click(function(){$('dl.box31').find('dt.box').removeClass('animated flipOutX');});
/* box31 end */
/* box32 start */
$('dl.box32').find('dt.box').hover(function(){$(this).addClass('animated flipOutY');});
$('dl.box32').find('span.add').click(function(){$('dl.box32').find('dt.box').addClass('animated flipOutY');});
$('dl.box32').find('span.move').click(function(){$('dl.box32').find('dt.box').removeClass('animated flipOutY');});
/* box32 end */
</script>
</html>
